<template>
  <div>
    <div class="bank-title">
      <el-tag v-for="pointt in pointed" :key="pointt.id" closable :disable-transitions="false" @close="removeLearning(pointt.id)">{{ pointt.title }}</el-tag>
      <el-button size="small" class="choose-btn" @click="showVisible">选择知识点</el-button>
    </div>
    <el-dialog title="选择知识点" :visible.sync="visible" with="60%" :close-on-click-modal="false" @close="closeChoose">
      <el-form size="mini" :model="point" :inline="true">
        <el-form-item label="知识点一级"><edu-select :options="config.category.options" :value.sync="point.category" :args="{}" /></el-form-item>
        <el-form-item label="知识点名称"><el-input v-model="point.title" placeholder="请输入知识点名称关键字" /></el-form-item>
        <el-form-item><el-button @click="search">搜索</el-button></el-form-item>
      </el-form>
      <el-table
        ref="pointTable"
        v-loading.lock="loading"
        :data="datas"
        style="width: 100%"
        height="400"
        row-key="id"
        @select="handleSelectChange"
        @select-all="handleSelectAllChange"
      >
        <el-table-column type="selection" min-width="50" />
        <el-table-column prop="title" label="知识点名称" />
        <el-table-column prop="cate" label="知识点分类" />
      </el-table>
      <el-pagination :current-page.sync="paginate.page" :page-size="paginate.count" layout="total, prev, pager, next,jumper" :total="total" @current-change="handleCurrentChange" />
      <div slot="footer" class="choose-footer">
        <el-button type="primary" size="small" @click="choose">确认</el-button>
        <el-button size="small" @click="closeChoose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EduSelect from '@public/form/select.vue';
export default {
  components: {
    EduSelect
  },
  props: {
    value: {
      type: Array,
      default: _ => []
    },
    bankId: {
      type: Number,
      default: 0
    },
    cates: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false, // 是否显示
      response: null, // 列表返回数据
      // 题库筛选数据
      point: {
        title: '',
        category: ''
      },
      // 分页
      paginate: {
        count: 16,
        page: 1
      },
      // 配置信息
      config: {
        category: {
          options: []
        }
      },
      multipleSelection: [],
      pointed: [...this.value]
      // loading: true
    };
  },
  computed: {
    datas() {
      if (this.response) {
        return this.response.data.datas;
      }
      return [];
    },
    total() {
      if (this.response) {
        return this.response.data.paginate.total;
      }
      return 0;
    }
  },
  watch: {
    value: {
      handler(data) {
        this.pointed = data;
      }
    },
    pointed: {
      handler(pointed) {
        this.$emit('update:value', pointed);
      }
    },
    bankId: {
      handler() {
        this.loadData();
        this.loadPointTop();
      }
    }
  },
  methods: {
    // 加载数据方法
    loadData: function() {
      // this.loading = true;
      var param = {};
      if (this.cates) {
        param = { cates: this.cates };
      }
      return this.$http.get(
        '/exam/admin/question/point/getChooseList',
        {
          ...this.paginate,
          ...this.point,
          ...param
        },
        response => {
          this.response = response;
          // this.loading = false;
        },
        _ => {
          // this.loading = false;
        },
        false
      );
    },
    // 加载数据方法
    loadPointTop: function() {
      var param = {};
      if (this.cates) {
        param = { cates: this.cates };
      }
      this.$http.get('/exam/admin/question/point/choose', param, response => {
        const { category } = response.data;
        this.$set(this.config.category, 'options', category);
      });
    },
    // 显示弹出层
    showVisible: function() {
      if (this.bankId) {
        this.visible = true;
        this.multipleSelection = [...this.pointed];
        this.setRowSelection();
      } else {
        this.$message.error('请选择题库');
      }
    },
    // 分页
    handleCurrentChange: function(page) {
      this.paginate.page = page;
      this.loadData()
        .then(() => {
          this.setRowSelection();
        })
        .catch(() => {});
    },
    // 设置默认选中
    setRowSelection: function() {
      // 设置默认选中
      this.$nextTick(() => {
        this.$refs.pointTable.clearSelection();
        this.multipleSelection.forEach(row => {
          const index = this.datas.findIndex(item => item.id === row.id);
          if (index !== -1) {
            this.$refs.pointTable.toggleRowSelection(this.datas[index], true);
          }
        });
      });
    },
    // 搜索
    search: function() {
      this.paginate.page = 1;
      this.loadData();
    },
    // 选择
    choose: function() {
      this.visible = false;
      this.pointed = [];
      this.multipleSelection.forEach(row => {
        const index = this.pointed.findIndex(item => item.id == row.id);
        if (index == -1) {
          this.pointed.push(row);
        }
      });

      this.$emit('update:value', this.pointed);
    },
    closeChoose: function() {
      this.visible = false;
      this.point.category = '';
    },
    // 知识点选项删除
    removeLearning(id) {
      this.$box
        .confirm('确认删除该知识点吗')
        .then(() => {
          var index = this.pointed.findIndex(item => item.id == id);
          if (index !== -1) {
            this.pointed.splice(index, 1);
          }
        })
        .catch(() => {});
    },
    // 单行选中与取消事件
    handleSelectChange: function(selection, row) {
      let index;
      if (selection.length == 0) {
        index = -1;
      } else {
        index = selection.findIndex(item => item.id === row.id);
      }
      if (index === -1) {
        // 删除操作
        const removeIndex = this.multipleSelection.findIndex(item => item.id == row.id);
        if (removeIndex !== -1) {
          this.multipleSelection.splice(removeIndex, 1);
        }
      } else {
        // 添加
        this.multipleSelection.push(row);
      }
    },
    handleSelectAllChange(selection) {
      if (selection.length == 0) {
        this.datas.forEach(row => {
          this.handleSelectChange([], row);
        });
      } else {
        selection.forEach(row => {
          this.handleSelectChange(selection, row);
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.bank-title {
  margin-right: 10px;
  .el-tag {
    margin-bottom: 6px;
  }
  .choose-btn {
    margin-left: 10px;
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>
